<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OKR @提示演示页面</title>
    <link rel="stylesheet" href="./src/atMention.css">
    <style>
        body {
            line-height: 1.5;
            max-width: 800px;
            margin-inline: auto;
        }
        h1 {
            text-align: center;
        }
        .mention {
            border: 1px solid #ddd;
            padding: .5rem;
        }
        .mention:empty::before {
            content: '输入字符@可以对齐其他人的目标';
            color: gray;
        }
        .tips {
            font-size: smaller;
            color: gray;
        }
        .log {
            font-size: smaller;
            color: red;
        }
    </style>

    <style>
        .person-okr {
            font-size: 14px;
        }
        .avatar {
            width: 2rem; height: 2rem;
            margin-right: .25rem;
            border-radius: 100%;
        }
        .link {
            display: flex;
            color: inherit;
            text-decoration: none;
            line-height: 1.25;
        }
        .department {
            color: darkgray;
            font-size: 13px;
        }
        .name {
            margin: 0;
            font-size: 100%;
        }
        .bar {
            display: flex;
            background-color: #f5f5f5;
            margin: 0 -1rem;
            padding: .25rem 1rem;
            justify-content: space-between;
            margin-top: .5rem;
        }
        .bar-r {
            color: #2a80eb;
            text-decoration: none;
        }
        .bar-l {
            color: gray;
        }
        .okr {
            padding-left: 0;
            margin: 0;
        }
        .okr:empty::before {
            content: '该人员暂未添加 OKR';
            display: block;
            padding: .5rem;
            text-align: center;
            color: darkgray;
        }
    </style>
</head>
<body>
    <h1>输入测试↓</h1>
    <div id="container" class="mention" contenteditable="true"></div>
    <p class="tips">试试输入：“松”，之所以没有过滤，因为默认走的是后端匹配（参数 optionsTribute 中的 searchOpts 参数设置）</p>
    <p id="result" class="log"></p>


    <script type="module">
        import atWakaka from './src/atWakaka.js';

        const log = function (content) {
            result.innerHTML = content;

            setTimeout(() => {
                result.innerHTML = '';
            }, 2000);
        };

        atWakaka('container', {
            // 请求地址，支持 Function 类型
            url: './cgi/data.json',

            // 按下回车键
            pressEnter: function (event) {
                event.preventDefault();

                log('回车默认行为被阻止');
            },

            // 鼠标经过 @ 提示元素
            onMouseOver: function (event, data, popover) {
                if (!data) {
                    return;
                }

                let query = new URLSearchParams(data).toString();

                // 此时自动会显示加载中...
                popover.innerHTML = '';

                // 请求数据
                fetch('./cgi/okr.json?' + query).then(res => res.json()).then(json => {
                    const jsonData = json && json.data;

                    if (jsonData) {
                        popover.innerHTML = `<div class="person-okr">
                            <div class="person">
                                <a href="?id=${jsonData.userid}" class="link">
                                    <img src="${jsonData.avatar}" class="avatar" alt="${jsonData.username}">
                                    <div class="info">
                                        <h6 class="name">${jsonData.username}-${setTimeout(0)}</h6>
                                        <span class="department">${jsonData.department}</span>
                                    </div>
                                </a>
                            </div>
                            <div class="bar">
                                <div class="bar-l">
                                    <span class="dt">已对齐的 OKR</span>
                                    <i class="divide">|</i>
                                    <span class="range">2022年7月-8月OKR</span>
                                </div>
                                <a href="?id=${jsonData.userid}&rid=9" class="bar-r"> OKR详情 </a>
                            </div>
                            <ol class="okr">${jsonData.objectList.map(obj => `<li>${obj.content}</li>`).join('')}</ol>
                        </div>`;
                    }
                });
            }
        });
    </script>
</body>
</html>